<template>
    <div class="w-full box-border p-16px">
        <div class="mg-b-16 bg-#ffffff p-16px rounded-8px">
            <filterComponent v-model:filter-data="filterData" showExport @doSearch="handleSearch" @export="handleExport"/>
        </div>
        <el-card class="reset">
            <tableComponent class="set-height" theme="light" :table-header="tableHeader" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
                <template #amount>
                    <el-table-column label="操作金额">
                        <template #default="scope">
                            <span class="orange">{{ scope.row.amount }}</span>
                        </template>
                    </el-table-column>
                </template>
                <template #auditStatus>
                    <el-table-column label="状态">
                        <template #default="scope">
                            <span :class="{ [`active-${scope.row.auditStatus}`]: true }">{{
                                statusName(scope.row.auditStatus)
                            }}</span>
                        </template>
                    </el-table-column>
                </template>
                <template #operate>
                    <el-table-column label="操作" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" link @click="handleClick(scope.row)">处理</el-button>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </el-card>
        <dialogFanxian v-model:show="showDialog" :id="id" @success="handleRefresh"/>
    </div>
</template>
<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import dialogFanxian from '../components/dialog/dialog-fanxian.vue'
import baseurl from '@/api/env'

import { promiotionList, recordExport } from '@/api/activity/index.ts'
const props = defineProps({
    companyId: {
        type: [Number, String]
    },
    insureType: {
        type: String,
        default: 'day'
    }
})

// const axios = {
//     day: {
//         getData: getBalanceRecordDay
//     },
//     long: {
//         getData: getBalanceRecord
//     },
//     group: {
//         getData: getBalanceRecordGroup
//     }
// }

const filterData = ref({
    list: {
        searchCustomText: {
            name: '客户',
            prop: 'searchCustomText',
            value: '',
            placeholder: '请输入客户姓名/企业',
            type: 'input',
            inputType: 'text',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            },
            handleInput: (item) => {

            }
        },
        searchText: {
            name: '推荐人',
            prop: 'searchText',
            value: '',
            placeholder: '请输入推荐人姓名/企业',
            type: 'input',
            inputType: 'text',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            },
            handleInput: (item) => {

            }
        },
        isPay: {
            name: '结算状态',
            prop: 'isPay',
            value: '',
            placeholder: '请选择',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '未结算',
                    value: 0
                },
                {
                    label: '已结算',
                    value: 1
                },
                {
                    label: '不发放',
                    value: 2
                },
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            },
            handleFocus: (item) => {
            },
            handleChange: (item) => {
            }
        },
        dealStatus: {
            name: '成交状态',
            prop: 'dealStatus',
            value: '',
            placeholder: '请选择',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '待跟进',
                    value: 0
                },
                {
                    label: '跟进中',
                    value: 1
                },
                {
                    label: '已成交',
                    value: 2
                },
                {
                    label: '申请成功',
                    value: 4
                },
                {
                    label: '申请失败',
                    value: 5
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            },
            handleFocus: (item) => {
            },
            handleChange: (item) => {
            }
        },

    },
    buttonList: [
        // {
        //     icon: 'Plus',
        //     name: '批量导入',
        //     click: () => {
        //         showDialog.value = true
        //     }
        // }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '企业名称',
        prop: 'customName',
    },
    {
        label: '客户姓名',
        prop: 'contactName',
    },
    {
        label: '客户电话',
        prop: 'contactPhone',
    },
    {
        label: '推荐人',
        prop: 'userName',
    },
    {
        label: '推荐人电话',
        prop: 'phone',
    },
    {
        label: '推荐人企业名称',
        prop: 'companyName',
        width: 150
    },
    {
        label: '推荐方式',
        prop: 'promotionType',
        map: {
            0: '精准',
            1: '图片'
        }
    },
    {
        label: '对接销售',
        prop: 'salesName',
    },
    {
        label: '成交状态',
        prop: 'dealStatus',
        map: {
            0: '待跟进',
            1: '跟进中',
            2: '已成交',
            4: '申请成功',
            5: '申请失败'
        }
    },
    {
        label: '返现金额',
        prop: 'rebateMoney',
        style: {
            color: '#FF7642',
        },
        prefix: '¥'
    },
    {
        label: '结算状态',
        prop: 'isPay',
        map: {
            0: '未结算',
            1: '已结算',
            2: '不发放'
        }
    },
    {
        label: '操作',
        prop: 'operate'
    }
])

const tableData = ref([])

const statusName = computed(() => {
    return (status) => {
        const map = {
            0: '未审核',
            1: '已审核',
            2: '已驳回',
            3: '已提现',
            4: '已转出',
            5: '已转入'
        }
        return map[status]
    }
})

const showDialog = ref(false)

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        if (Array.isArray(filterData.value.list[key].value)) {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value.join(',')
        } else {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value
        }
    }
    return query
}


const getData = () => {
    const query = {
        ...createQuery(),
        companyId: props.companyId,
        type: 1,
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum
    }
    if (props.insureType === 'day') {
        query.type = 0
    } else if (props.insureType === 'group') {
        query.type = 2
    }
    promiotionList(query).then(res => {
        tableData.value = res.rows
        pageInfo.value.total = res.total
    })
}

const sortMethod = (column) => {
    console.log(123, column)
}

const handleSearch = () => {
    getData()
}

const handlePageChange = () => {
    getData()
}

const id = ref('')

const toDetail = () => {
    console.log(2222)
}

const handleClick = (row) => {
    id.value = row.id
    showDialog.value = true
}

const handleRefresh = () => {
    pageInfo.value.pageNum = 1
    getData()
}

const handleExport = () => {
    const query = {
        ...createQuery(),
    }
    recordExport(query).then(res => {
        window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
    })
}

onMounted(() => {
    getData()
})
</script>
<style lang="scss" scoped>
.container {
    padding: 16px;
}

.set-height {
    // height: calc(100vh - 425px);
}

.orange {
    color: #FF7642;
}

$colors: (
    0: #9497B1,
    1: #202536,
    4: #3DB86D,
    2: #E05F42,
    5: #FFA814,
    3: #3E5FF5
);

@each $index,
$color in $colors {
    .active-#{$index} {
        color: $color;
    }
}
</style>
